<script setup lang="ts">
import {reactive} from "vue";
import {userStore} from "@src/store/user.ts";
import {useRouter} from "vue-router";

const router = useRouter();
const form = reactive({username: "", password: ""});
function login() {
    userStore().login("qwe-qwe-qwe", form.username, "User");
    router.push("/home");
}
</script>

<template>
    <div class="form-container">
        <el-form class="login-form" :model="form" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style scoped>
.form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

.login-form {
    width: 30vw;
}
</style>
